// USER VARIABLES SECTION

accent = orange // Accent Color
fontsize = 16px // Body Font Size
textcolor = #333 // Text Color
system = -apple-system, BlinkMacSystemFont, Arial, sans-serif // System Font Family
roboto = Roboto, sans-serif // Roboto Font Family

// IMPORT SECTION

@import '/node_modules/bootstrap/dist/css/bootstrap-reboot.min.css' // Bootstrap Reboot collection
// @import '/node_modules/bootstrap/dist/css/bootstrap-grid.min.css' // Optional Bootstrap Grid

// FONTS LOAD SECTION

font(fname, fstyle, fweight, furl)
	@font-face
		font-family fname
		font-style fstyle
		font-weight fweight
		// font-display swap // Uncomment to initially display system fonts
		src local(fname), url(furl) format('woff2')


font('Roboto', normal, 400, '../fonts/roboto-regular-webfont.woff2')
font('Roboto', italic, 400, '../fonts/roboto-italic-webfont.woff2')
font('Roboto', normal, 700, '../fonts/roboto-bold-webfont.woff2')
font('Roboto', italic, 700, '../fonts/roboto-bolditalic-webfont.woff2')

// GENERAL DOCUMENT STYLES

::placeholder
	color #666

::selection
	background-color accent
	color #fff

input, textarea
	outline none
	&:focus:required:invalid
		border-color red
	&:required:valid
		border-color green

body
	font-family roboto
	font-size fontsize
	min-width 320px
	position relative
	line-height 1.65
	overflow-x hidden
	color textcolor
